<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="admin/_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外链新增</title>
    <!--标题栏图标-->
    <link rel="icon" href="../..//images/Common/favicon.ico" th:href="@{/images/Common/favicon.ico}"
          type="images/x-ico"/>
    <!--引入semantic-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
    <!--引入editormd-->
    <link rel="stylesheet" href="../../static/lib/editormd/css/editormd.min.css"
          th:href="@{/lib/editormd/css/editormd.min.css}">
    <link rel="stylesheet" href="../../static/css/me-common.css" th:href="@{/css/me-common.css}">
    <link rel="stylesheet" href="../../static/css/me-special.css" th:href="@{/css/me-special.css}">
    <link rel="stylesheet" href="../../static/css/me-media.css" th:href="@{/css/me-media.css}">
</head>
<body>

<!------导航------>
<!--inverted:颜色反转；attached消除圆角-->
<nav th:replace="admin/_fragments :: menu(4)" class="ui inverted attached segment m-padded-tb-mini">
    <div class="ui container">
        <div class="ui inverted secondary stackable menu">
            <img src="../../static/images/Common/logo_row_simple.png" th:src="@{/images/Common/logo_row_simple.png}"
                 class="left float image m-margin-right-middle" height="50px" alt="">
            <a href="../index.html" class="m-item item m-mobile-hide"><i class="home icon m-margin-right-no"></i>博客</a>
            <a href="../categories.html" class="m-item item m-mobile-hide"><i
                    class="folder open icon m-margin-right-no"></i>分类</a>
            <a href="../tags.html" class="m-item item m-mobile-hide"><i class="tags icon m-margin-right-no"></i>标签</a>
            <a href="../archives.html" class="m-item item m-mobile-hide"><i class="archive icon m-margin-right-no"></i>归档</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="heartbeat icon m-margin-right-no"></i>娱乐<i
                    class="angle down icon m-margin-right-no "></i></a>
            <a href="../links.html" class="m-item item m-mobile-hide"><i
                    class="linkify icon m-margin-right-no"></i>外链</a>
            <a href="../about.html" class="m-item item m-mobile-hide"><i class="user icon m-margin-right-no"></i>关于我</a>
            <div class="right m-item m-mobile-hide menu">
                <div class="ui dropdown item">
                    <div class="text">
                        <img src="../../static/images/Common/avatar.png" alt="" class="ui avatar image">
                        Phoenix
                    </div>
                    <i class="dropdown icon"></i>
                    <div class="menu">
                        <a href="#" class="item">退出登录</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <a href="#" class="ui black menu toggle icon button m-right-top m-mobile-show">
        <i class="sidebar icon"></i>
    </a>
</nav>

<!--二级导航-->
<div class="ui attached pointing menu">
    <div class="ui container">
        <div class="right menu">
            <a href="#" th:href="@{/admin/links/newLink}" class="active teal item">新增</a>
            <a href="#" th:href="@{/admin/links}" class="item">列表</a>
        </div>
    </div>
</div>


<!------中间内容------->
<main class="m-container">
    <div class="ui container">
        <form id="blog-form" action="#" th:object="${link}" enctype="multipart/form-data"
              th:action="*{id}==null ? @{/admin/links} : @{/admin/links/{id}(id=*{id})}" method="post" class="ui form">
            <input type="hidden" name="published">
            <input type="hidden" name="id" th:value="*{id}">
            <div class="required field">
                <div class="ui left labeled input">
                    <label class="ui teal basic label">名称</label>
                    <input type="text" name="title" placeholder="请输入网站名称" th:value="*{title}">
                </div>
            </div>
            <div class="required field">
                <div class="ui left labeled input">
                    <label class="ui teal basic label">网址</label>
                    <input type="text" name="url" placeholder="请输入网站网址" th:value="*{url}">
                </div>
            </div>
            <div class="field">
                <div class="ui left labeled input">
                    <label class="ui teal basic label">优先级</label>
                    <input type="text" name="priority" placeholder="请输入网站显示优先级" th:value="*{priority}">
                </div>
            </div>
            <div class="field">
                <div class="ui left labeled input">
                    <label class="ui teal basic label">站长邮箱</label>
                    <input type="text" name="email" placeholder="请输入网站站长邮箱" th:value="*{email}">
                </div>
            </div>
            <div class="required field">
                <div class="ui left labeled input">
                    <div class="ui selection compact  teal basic  dropdown label">
                        <input type="hidden" onchange="transferType()" value="netLink" name="uploadType"
                               id="uploadType">
                        <i class="dropdown icon"></i>
                        <div class="text">网络链接</div>
                        <div class="menu">
                            <div class="item" data-value="netLink">图片网络链接</div>
                            <div class="item" data-value="upLoad">图片本地上传</div>
                        </div>
                    </div>

                    <input type="text" class="type1_data type1" name="imageUrl" th:value="*{avatar}" placeholder="请输入图片地址......">
                    <button class="ui button type1 m-margin-left-small" type="button">
                        核验地址
                    </button>
                    <input type="file" id="file_data" class="type2_data" name="file" style="display: none">
                    <input type="text" class="file_name type2" placeholder="请选择一张图片.......">
                    <button class="ui button select_file type2 m-margin-left-small" type="button">选择图片</button>
                </div>

            </div>

            <div class="required field">
                <div class="ui left labeled action input">
                    <label class="ui compact teal basic label">分类</label>
                    <div class="ui fluid selection dropdown">
                        <input type="hidden" name="linkCategory.id" th:value="*{linkCategory}!=null ? *{linkCategory.id}">
                        <i class="dropdown icon"></i>
                        <div class="default text">分类</div>
                        <div class="menu">
                            <div th:each="linkCategory : ${linkCategories}" class="item" data-value="1"
                                 th:data-value="${linkCategory.id}" th:text="${linkCategory.name}">错误日志
                            </div>
                            <!--/*-->
                            <div class="item" data-value="1">错误日志</div>
                            <div class="item" data-value="2">开发者手册</div>
                            <!--*/-->
                        </div>
                    </div>
                </div>
            </div>

            <div class="required field">
                <textarea name="description" class="m-text-lined" th:text="*{description}" autocomplete="off"
                          minlength="12" maxlength="50" placeholder="网站介绍"></textarea>
            </div>

            <div class="ui error message"></div>

            <div class="ui right aligned container">
                <button type="button" class="ui button" onclick="showCancelDialog()">返回</button>
                <button class="ui teal button">保存</button>
            </div>
        </form>
    </div>
</main>

<th:block th:replace="admin/_fragments :: cancelDialog">
    <div class="ui mini cancel modal">
        <div class="header">返回页面</div>
        <div class="content">
            <p>确定返回吗？点击确定后，您的修改将会丢失！</p>
        </div>
        <div class="actions">
            <div class="ui negative button">取消</div>
            <div class="ui positive right labeled icon button"><font style="vertical-align: inherit;"><font
                    style="vertical-align: inherit;">确认</font></font><i class="checkmark icon"></i></div>
        </div>
    </div>
</th:block>

<br>
<br>
<!------底部footer------>
<footer th:replace="admin/_fragments :: footer">
    <!--底部teal颜色的条-->
    <div class="ui segment vertical teal inverted m-padded-tb-mini "></div>
    <!--底部footer正文-->
    <div class="ui inverted vertical segment m-padded-tb-big">
        <div class="ui container">
            <div class="ui stackable grid">
                <!--QQ微信联系方式二维码及打赏二维码占六个栅栏-->
                <div class="five wide center aligned column m-children-center">
                    <!--QQ联系方式二维码-->
                    <div class="m-inline-block m-margin-right-small">
                        <img src="../../static/images/Common/QQ.png" th:src="@{/images/Common/QQ.png}"
                             class="ui rounded image" alt=""
                             style="width: 100px;height: 100px">
                        <span class="m-margin-top-small m-opacity-mini">我的QQ</span>
                    </div>
                    <!--微信联系方式二维码-->
                    <div class="m-inline-block m-margin-right-small">
                        <img src="../../static/images/Common/WeChat.png" th:src="@{/images/Common/WeChat.png}"
                             class="ui rounded image" alt=""
                             style="width: 100px;height: 100px">
                        <span class="m-margin-top-small m-opacity-mini">我的微信</span>
                    </div>
                    <!--打赏方式二维码-->
                    <div class="m-inline-block">
                        <img src="../../static/images/Common/Pay.png" th:src="@{/images/Common/Pay.png}"
                             class="ui rounded image" alt=""
                             style="width: 100px;height: 100px">
                        <span class="m-margin-top-small m-opacity-mini" style="color: red">打赏</span>
                    </div>
                </div>
                <!--站点声明文字表述战11个栅栏-->
                <div class="eleven wide left aligned column ">
                    <h4 class="ui teal header">站点声明：</h4>
                    <p class="m-opacity-mini">1.文中的商标及图像版权属于其合法持有人，只供传递信息之用，非商务用途。交流时请遵守理性，宽容的原则。</p>
                    <p class="m-opacity-mini">2.所有文章未经授权禁止转载、摘编、复制或建立镜像，如有违反，追究法律责任。</p>
                    <p class="m-opacity-mini">Copyright © 2020 xinglongfei.cn. Designed by Phoenix.
                        备案号：京ICP备xxxxxxxx号-x </p>
                </div>
            </div>
        </div>
    </div>
</footer>


<!--/*/<th:block th:replace="admin/_fragments :: script">/*/-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<!--引入semantic-->
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<!--引入editormd-->
<script src="../../static/lib/editormd/editormd.min.js"></script>
<!--/*/</th:block>/*/-->


<script>

    document.onkeydown = function(e) {
        var e = e || event;
        if(e.keyCode == 13) {
            e.preventDefault ? e.preventDefault() : (e.returnValue = false);
        }
    }


    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });

    $('.ui.dropdown').dropdown({
        on: 'hover'
    });


    $('.ui.form').form({
        keyboardShortcuts: false,
        fields: {
            title: {
                identifier: 'title',
                rules: [{
                    type: 'empty',
                    prompt: '网站名称：网站名称不能为空'
                }]
            },
            url: {
                identifier: 'url',
                rules: [{
                    type: 'empty',
                    prompt: '网站网址：网站网址不能为空'
                }]
            },
            // priority: {
            //     identifier: 'priority',
            //     rules: [{
            //         type: 'empty',
            //         prompt: '优先级：优先级不能为空'
            //     }]
            // },
            linkCategoryId: {
                identifier: 'linkCategory.id',
                rules: [{
                    type: 'empty',
                    prompt: '外链分类：外链分类不能为空'
                }]
            },
            // email: {
            //     identifier: 'email',
            //     rules: [{
            //         type: 'empty',
            //         prompt: '站长邮箱：站长邮箱不能为空'
            //     }]
            // },
            description: {
                identifier: 'description',
                rules: [{
                    type: 'empty',
                    prompt: '网站描述：网站描述不能为空'
                }]
            },
            imageUrl: {
                identifier: 'imageUrl',
                rules: [{
                    type: 'empty',
                    prompt: '网站图标：图标地址不能为空'
                }]
            }
        }
    });

    function transferType() {
        var uploadType = $('#uploadType').val();
        //根据下来菜单不同的选择显示不同的组件，并为激活的组件设置name属性
        if (uploadType === 'netLink') {
            $('.type1').css("cssText", "display:block!important");
            $('.type2').css("cssText", "display:none!important");
            $('.ui.form').form('add rule', 'imageUrl', {
                rules: [
                    {
                        type: 'empty',
                        prompt: '网站图标：图标地址不能为空'
                    }
                ]
            }).form('remove field', ['file']);
        } else if (uploadType === 'upLoad') {
            $('.type2').css("cssText", "display:block!important");
            $('.type1').css("cssText", "display:none!important");
            $('.ui.form').form('add rule', 'file', {
                rules: [
                    {
                        type: 'empty',
                        prompt: '网站图标：图标文件不能为空'
                    }
                ]
            }).form('remove field', ['imageUrl']);
        }
    }

    // 点击button触发文件选择
    $('.select_file').click(function () {
        $('#file_data').click();
    });

    //选择图片后进行条件过滤
    $('#file_data').change(function () {
        //获取上传的图片对象
        var fileData = this.files[0];

        //图片类型过滤
        if (!/image\/\w+/.test(fileData.type)) {
            alert("请勿上传非图片类型的文件！");
            $("#file_data").val("");
            return false;
        }
        //图片大小过滤
        if (fileData.size > 2 * 1024 * 1024) {
            alert("图片大小要求在2MB以内！");
            $("#file_data").val("");
            return false;
        }
        $('.file_name').val(fileData.name);

    })

    $('.selection.dropdown')
        .dropdown()
    ;

    function showCancelDialog() {
        $('.ui.mini.cancel.modal')
            .modal('setting', 'closable', false)
            .modal({ //各种回调方法
                onApprove: function () {  //单击确认按钮
                    self.location=document.referrer;
                },
            })
            .modal('show')
        ;
    }

</script>

</body>
</html>